<template>
  <div class="record-list">
    <div class="header">
      <el-date-picker
        size="small"
        v-model="dateValues"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button class="search-btn" size="small" type="primary" @click="searchBtnClick">查询</el-button>
    </div>
    <el-table
      border
      :data="dataArr"
      style="width: 100%">
      <el-table-column
        prop="createUser.name"
        label="创建人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTimeStr"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="index"
        label="索引"
        width="80">
      </el-table-column>
      <el-table-column
        label="数据">
        <template slot-scope="scope">
          {{ scope.row.data.length > 200 ? `${scope.row.data.substr(0, 200)} ...` : scope.row.data }}
          <el-button type="text" size="small" @click="copyBtnClick(scope.row.data)">复制</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button v-if="isSuperAdmin" type="text" size="small" @click="removeBtnClick(scope.row)">删除</el-button>
          <el-button type="text" size="small" @click="restoreBtnClick(scope.row)">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <w-pagination ref="WPagination" :total="total" @pageChange="getListData"></w-pagination>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import { Getter } from 'vuex-class'
  import YBPopView from "@/utils/popView";
  import DataModel from '@/models/DataModel'
  import WPagination from '@/components/global/pagination/index.vue'
  import { Pagination as PaginationType } from '@/components/global/pagination/types'
  import { PageDataType } from '@/models/types'

  @Component({
    name: 'RecordPage',
    components: {
      WPagination
    }
  })
  export default class RecordPage extends Vue {

    @Getter('isSuperAdmin') isSuperAdmin!: boolean
    dateValues: Array<Date> = []
    dataArr: Array<DataModel> = []
    total = 0

    searchBtnClick() {
      (this.$refs.WPagination as PaginationType).reload()
    }

    getListData(pageData: PageDataType) {
      const { id } = this.$route.params
      const [ startTime, endTime ] = this.dateValues
      DataModel.record<DataModel>(id, pageData, {
        startTime: startTime ? startTime.getTime() : undefined,
        endTime: endTime ? endTime.getTime() : undefined
      }).then((data) => {
        this.dataArr = data.list
        this.total = data.total
      })
    }

    removeBtnClick(model: DataModel) {
      model.removeRecordData(`数据无价，确认要删除当前记录吗？`).then(() => {
        YBPopView.msgSuccess('删除成功')
        this.searchBtnClick()
      })
    }

    restoreBtnClick(model: DataModel) {
      YBPopView.confirm('恢复确认', '确定需要恢复当前数据吗?').then(() => {
        model.restoreOne().then(() => {
          YBPopView.msgSuccess('恢复成功')
          this.searchBtnClick()
        })
      })
    }

    copyBtnClick(data: string){
      this.$copyText(data).then(function (){
        YBPopView.msgSuccess('复制成功')
      })
    }
  }

</script>

<style lang="scss" scoped>
  .record-list {
    .header {
      padding-bottom: 20px;
      display: flex;
      justify-content: flex-end;
      .search-btn {
        margin-left: 20px;
      }
    }
  }
</style>
